import React from 'react';
import './css/basic.less'
import {BASICS} from '../../utils/config'
const basics = BASICS
const normal = {
  backgroundImage: `url(${require("../../images/tests/eval-normal.png")})`,
  backgroundRepeat: 'no-repeat'
}
const active = {
  backgroundImage: `url(${require("../../images/tests/eval-active.png")})`,
  backgroundRepeat: 'no-repeat'
}
class TestsBasic extends React.Component {
  state = {
    curLevel: '0'
  }
  changeRadio = (item) => {
    this.setState({
      curLevel: item
    })
    this.props.getBasicLevel(item)
  }
  render() {
    return (
      <div className="testbasic">
        <div className="testbasic-title">测试前，请评估孩子的英文水平</div>
        <div className="testbasic-content col-md-offset-3 col-sm-offset-3">
          {Object.keys(basics).map((item, index) => (
            <div className="testbasic-img" key={index} style={item === this.state.curLevel?active:normal} onClick={() => this.changeRadio(item)}>
              {basics[item]}  
              {/* <input type="radio" name="level" defaultChecked = {index===0} onChange={() => this.props.getBasicLevel(item)}/>{basics[item]} */}
            </div>
          ))}
        </div>
      </div>
    );
  }
}
export default TestsBasic;